<template>
  <div>
    <!-- 
        https://web.codeboy.com/mfresh/data/news_select.php?pageNum=1
        1.methods中 getData方法,用axios 请求接口中的数据,打印查看
        2.在mounted中,触发getData方法
        3.在data中声明 data属性,存储请求到的数据
        4.把data中的数据展示出来,注意:v-if判断
       -->

    <!-- 
        多个兄弟标签都采用了 v-if,可以提取到外部
        新增一个div作为父元素,会影响dom的层级,有可能影响到css的布局
        template:虚拟的容器 不是真正的dom元素 主要配合v-if 或 v-for使用
        -->
    <template v-if="data">
      <div class="box">
        <div v-for="{ nid, pubTime, title } in data.data" :key="nid">
          <span>{{ title }}</span>
          <span>{{ pubTime }}</span>
        </div>
      </div>

      <div class="pages">
        <span v-show="now != 1" @click="now--">上一页</span>
        <span
          :class="{ active: now == p }"
          @click="now = p"
          v-for="p in data.pageCount"
          :key="p"
          >{{ p }}</span
        >
        <span @click="now++" v-show="now != data.pageCount">下一页</span>
      </div>
    </template>
  </div>
</template>

<script>
// 前提需要安装axios  npm i axios
import axios from "axios";
export default {
  data() {
    return {
      data: null,
      now: 1, //当前页
    };
  },
  methods: {
    getData() {
      const url = `https://web.codeboy.com/mfresh/data/news_select.php?pageNum=${this.now}`;
      axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
  mounted() {
    this.getData();
  },
  // 监听器:now变化是 重新请求数据
  watch: {
    now() {
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 700px;
  div {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed;
  }
}
.pages {
  display: flex;
  > span {
    padding: 10px 15px;
    background-color: darkblue;
    user-select: none;
    cursor: pointer;
    margin: 3px;
    border-radius: 5px;
    color: white;
    &.active {
      background-color: orangered;
      color: #000;
    }
  }
}
</style>

